// web/src/app/learn/(dashboard)/(routes)/teacher/courses/_components/columns.tsx
"use client"

import {ColumnDef} from "@tanstack/react-table"
import {Course} from "@prisma/client";
import {Button} from "@/components/ui/button";
import {ArrowUpDown, MoreHorizontal, Pencil} from "lucide-react";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import Link from "next/link";
import {Badge} from "@/components/ui/badge";
import {cn} from "@/lib/utils";
import {formatPrice} from "@/lib/format";

// 参考: https://ui.shadcn.com/docs/components/data-table#project-structure
export const columns: ColumnDef<Course>[] = [
    {
        accessorKey: "title",
        header: ({column}) => {
            return <Button
                variant={'ghost'}
                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            >
                Title
                <ArrowUpDown className={`ml-2 size-4`}/>
            </Button>
        },
    },
    {
        accessorKey: "price",
        header: ({column}) => {
            return <Button
                variant={'ghost'}
                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            >
                Price
                <ArrowUpDown className={`ml-2 size-4`}/>
            </Button>
        },
        cell: ({row}) => {
            const price = parseFloat(row.getValue('price') || '0')
            const formatted = formatPrice(price)

            return (
                <div>{formatted}</div>
            )
        }
    },
    {
        accessorKey: "isPublished",
        header: ({column}) => {
            return <Button
                variant={'ghost'}
                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            >
                Published
                <ArrowUpDown className={`ml-2 size-4`}/>
            </Button>
        },
        // 自定义单元格呈现的样式
        cell: ({row}) => {
            const isPublished = row.getValue('isPublished') || false

            return (
                <Badge className={cn(
                    `bg-slate-500`,
                    isPublished && 'bg-sky-700'
                )}>
                    {isPublished ? 'Published' : 'Draft'}
                </Badge>
            )
        }
    },
    {
        accessorKey: "actions",
        cell: ({row}) => {
            const {id} = row.original

            return (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant={'ghost'} className={`h-4 w-8 p-0`}>
                            <span className={`sr-only`}>Open menu</span>
                            <MoreHorizontal className={`size-4`}/>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align={'end'}>
                        <Link href={`/learn/teacher/courses/${id}`}>
                            <DropdownMenuItem>
                                <Pencil className={`size-4 mr-2`}/>
                                Edit
                            </DropdownMenuItem>
                        </Link>
                    </DropdownMenuContent>
                </DropdownMenu>
            )
        }
    }
]